//引入样式
require('../css/commonCss/normalize.css')
require('../css/commonCss/reset.css')
require('../css/commonCss/property.css')
require('../css/commonCss/basic.less')
require('../fonts/iconfont.css')

require('../css/personaldata.less')
//引入axios
const axios = require('axios')
//weui—插件库
require('weui')
const weui = require('weui.js')
// 文档加载事件
document.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const returnUp = document.querySelector('#returnUp') //返回上一个页面
    const fileImg = document.querySelector('#fileImg') //更换头像
    const nickname = document.querySelector('#nickname') //昵称
    const imgurl = document.querySelector('#imgurl') //更换图片
    const sexPicker = document.querySelector('#sexPicker') //更换性别
    const sex = document.querySelector('#sex') //性别
    const sexProvence = document.querySelector('#sexProvence') //所在省份
    const provence = document.querySelector('#provence') //省份
    const sexCity = document.querySelector('#sexCity') //所在城市
    const city = document.querySelector('#city') //城市
    const birthdayPicker = document.querySelector('#birthdayPicker') //具体生日
    const birthday = document.querySelector('#birthday') //生日
    const savaMsg = document.querySelector('#savaMsg') //保存用户信息
    const sign = document.querySelector('#sign') //个性签名
    const num1 = document.querySelector('#num1') //签名字数
    // 通过userId获取用户信息
    axios.get("http://139.9.177.51:8099/users/accountinfo", {
        params: {
            userId: localStorage.userId //获取用户id
        }
    }).then(function (res) {
        // console.log(res.data.data);
        let data = res.data.data;
        // 渲染昵称
        nickname.value = data.nickname;
        // 如果是新用户，没有值的话要先进性判断在进行渲染
        if (data.imgurl) {
            imgurl.src = data.imgurl;
        }
        if (data.gender) {
            sex.textContent = data.gender;
        }
        if (data.birthday) {
            birthday.textContent = data.birthday.substr(0, 10);
        }
        if (data.address) {
            provence.textContent = data.address.split(",")[0]
            city.textContent = data.address.split(",")[1]
        }
        if (data.sign) {
            sign.value = data.sign;
        }
    })
    //更换头像
    fileImg.addEventListener('change', function () {
        // alert(111)
        // console.log(this.files[0]);
        let file = this.files[0];
        // 图片上传必须借助formData
        // 实例化一个fd对象
        let fd = new FormData();
        // 把参数追加到fd中
        fd.append('imgurl', file)
        // console.log(fd);
        axios.post('http://139.9.177.51:8099/users/upload', fd)
            .then(function (res) {
                // console.log(res.data);
                // 判断成功拼接最新上传图片渲染到页面中
                if (res.data.status === 1) {//失败
                    weui.alert(res.data.msg)
                } else {
                    // 拼接最新上传图片渲染到页面中
                    document.querySelector('#imgurl').src = 'http://139.9.177.51:8099' + res.data.data
                }

            })
    })
    // 美化页面
    // 把点击事件添加给图片，点击图片再出发input框
    imgurl.addEventListener('click', function () {
        // alert(111)
        fileImg.click();
    })
    // 返回上一个页面
    returnUp.addEventListener('click', function () {
        // 返回上一级
        history.go(-1)
    })
    //性别
    sexPicker.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        },], {
            onConfirm: function (result) {
                // console.log(result[0].label);
                // 渲染到页面中
                sex.textContent = result[0].label
            },
            title: '请选择性别'
        });
    });

    let proArr = [];//定义所有省份
    let cityArr = [];//定义省份下面的所有城市
    // 从后台获取省份数据
    axios.get("http://139.9.177.51:8099/address/province")
        .then(function (res) {
            // console.log(res.data);
            let data = res.data.data;
            // 把后台数据处理成我们自己想要的数据
            proArr = data.map(function (item) {
                return { label: item.name, value: item.addressId }
            })
            // console.log(proArr);
        })
    //所在省份
    sexProvence.addEventListener('click', function () {
        weui.picker(proArr, {
            onConfirm: function (result) {
                // console.log(result[0].label);
                // 渲染到页面中
                provence.textContent = result[0].label;
                // 获取pid
                let pid = result[0].value;
                // console.log(pid);
                // 从后台获取城市
                axios.get("http://139.9.177.51:8099/address/city/" + pid)
                    .then(function (res) {
                        // console.log(res.data.data);
                        let data = res.data.data;

                        cityArr = data.map(function (item) {
                            return { label: item.name, value: item.addressId }
                        })
                        // console.log(cityArr);
                        // 清除上次选择的城市
                        city.textContent = "请选择你的所在城市"
                        // city.textContent = cityArr[0].label;

                    })
            },
            title: '请选择所在省份'
        });
    });
    //所在城市
    sexCity.addEventListener('click', function () {
        if (cityArr.length === 0) {
            weui.toast('请先选择省份')
            return;
        }
        weui.picker(cityArr, {
            onConfirm: function (result) {
                // console.log(result[0].label);
                // 渲染到页面中
                city.textContent = result[0].label
            },
            title: '请选择所在省份'
        });
    });
    //补0函数
    function fillZero(num) {
        return num < 9 ? '0' + num : num;
    }
    //生日
    birthdayPicker.addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear() - 80,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // console.log(result);
                // 后台需要yyyy-mm-dd格式
                let str = [result[0].value, fillZero(result[1].value), fillZero(result[2].value)].join("-")
                // console.log(str);
                birthday.textContent = str;
            },
            title: '请选择你的出生年月日'
        });
    });
    // 保存用户信息
    savaMsg.addEventListener('click', function () {
        // alert(111)
        //当我们遇见参数比较多的时候，首先要保证的是参数的正确性，才去发送ajax
        let params = {
            imgurl: imgurl.src,//头像
            nickname: nickname.value,//昵称
            gender: sex.textContent,//性别
            birthday: birthday.textContent,//生日
            address: [provence.textContent, city.textContent],//省市
            sign: sign.value,//签名
            // userId:localStorage.getItem("userId")//用户id
            userId: localStorage.userId//用户id
        }
        // console.log(params);

        axios.post("http://139.9.177.51:8099/users/userEdit", params)
            .then(function (res) {
                // 代表成功
                if (res.data.status === 0) {
                    weui.toast('修改成功', {
                        callback: function () {
                            location.href = './mine.html'
                        }
                    })
                } else {
                    weui.alert('修改失败，请重新修改哟！')
                }
            })
    })
    // 文字字数
    sign.addEventListener('input', function () {
        num1.textContent = this.value.length;
    })

})
